﻿<div [@routerTransition]>
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator"><span>管道展示</span></h3>
        <span class="m-section__sub"> 管道展示的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right">
        <!--
          <button *ngIf="isGranted('Pages.Administration.Languages.Create')" (click)="createOrEditLanguageModal.show()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewLanguage")}}</button>
        -->
      </div>
    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text">
              <span class="m-badge m-badge--success"></span>自动执行
              <i class="fa fa-exclamation-triangle m--font-warning" style="margin-left:10px; font-size: 20px;"></i
              >触发异常
              <i class="fa fa-exclamation-triangle m--font-info" style="margin-left:10px; font-size: 20px;"></i>新插入
              <span
                style="display: inline-block; border: 2px solid #34bfa3; padding: 2px 5px; font-size: 16px; margin: 2px 40px 2px 10px;"
                >当前节点
              </span>

              <!--
                <span class="flag-item m--bg-gy">工艺类 </span>
                <span class="flag-item m--bg-zl">质量类 </span>
                <span class="flag-item m--bg-cb">成本类 </span>
                <span class="flag-item m--bg-yl">原材料类 </span>
                <span class="flag-item m--bg-rw">任务类 </span>
                <span class="flag-item m--bg-gxzx">工序执行类 </span>
                <span class="flag-item m--bg-rwzx">任务执行类 </span>
              -->
            </h3>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul
            class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
            role="tablist"
          >
            <li class="nav-item m-tabs__item">
              <div class="btn-group m-btn-group" role="group" aria-label="...">
                <button
                  type="button"
                  class="btn btn-secondary m-btn--hover-brand"
                  [ngClass]="{ active: !isFinished }"
                  (click)="getDoingPipeines()"
                >
                  进行
                </button>
                <button
                  type="button"
                  class="btn btn-secondary m-btn--hover-brand"
                  [ngClass]="{ active: isFinished }"
                  (click)="getFilishedPipeines()"
                >
                  完成
                </button>
              </div>
            </li>
            <li class="nav-item m-tabs__item" style="width: 300px; margin-left: 40px;">
              <a href="javascript:;" class="m-portlet__nav-link m-btn--pill">
                <div class="m-input-icon m-input-icon--right">
                  <input
                    type="text"
                    class="form-control m-input m-input--solid"
                    placeholder="Search..."
                    [(ngModel)]="filterText"
                    (keyup)="$event.which === 13 ? getPipes() : 0"
                  />
                  <span class="m-input-icon__icon m-input-icon__icon--right">
                    <span> <i class="la la-search m--font-brand"></i> </span>
                  </span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="m-portlet__body">
        <div class="row align-items-center" style="margin: 0;">
          <div class="tab-content" style="width:100%;">
            <div class="tab-pane active">
              <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                <div class="m-flex">
                  <div class="table-responsive">
                    <div>
                      <div *ngFor="let pipe of pipes"><flex-item [pipe]="pipe"></flex-item></div>
                    </div>
                    <div class="primeng-paging-container">
                      <p-paginator
                        rows="3"
                        #paginator
                        (onPageChange)="getPipes($event)"
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                      >
                      </p-paginator>
                      <span class="total-records-count"> {{ '总计:' + primengTableHelper.totalRecordsCount }} </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
